<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>小米官网</title>
    <link rel="stylesheet" href="../css/小米官网.css">
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <link href="../images/favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
    
    <!-- 顶部设计 -->
       <div class="nav">
           <div class="nav-wrap">
               <ul class="nav-left">
                    <li><a href="#">小米网</a></li>
                    <span class="line">|</span>
                    <li><a href="#">MIUI</a></li>
                    <span class="line">|</span>
                    <li><a href="#">米聊</a></li>
                    <span class="line">|</span>
                    <li><a href="#">游戏</a></li>
                    <span class="line">|</span>
                    <li><a href="#">多看阅读</a></li>
                    <span class="line">|</span>
                    <li><a href="#">云服务</a></li>
                    <span class="line">|</span>
                    <li><a href="#">小米移动网</a></li>
                    <span class="line">|</span>
                    <li><a href="#">Select region</a></li>
                    <span class="line">|</span>
                    <li><a href="#">米粉丝答疑</a></li>
                    <span class="line">|</span>
               </ul>
               <ul class="nav-right">
                    <li><a href="#">注册</a></li>
                    <span class="line">|</span>
                    <li><a href="#">登录</a></li>
               </ul>
           </div>
       </div>

<!-- search部分 -->
<div class="search">
    <img src="../images/milogo.png" alt="">
    <a href="#"><i class="shopcar"></i>购物车</a>
    <span><i></i>4月14日开放购买</span>
    <button class="iconfont search-btn"></button>
    <input type="text" placeholder="搜索您需要的商品" />
</div>

<!-- 商品展示部分 -->
<div class="contain">
    <div class="contain-top-nav">
        <ul>
            <li><a href="">全部商品分类</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">小米手机</a></li>
            <li><a href="">红米</a></li>
            <li><a href="">小米平板</a></li>
            <li><a href="">小米电视</a></li>
            <li><a href="">盒子</a></li>
            <li><a href="">路由器</a></li>
            <li><a href="">合约机</a></li>
            <li><a href="">服务</a></li>
            <li><a href="">社区</a></li>
        </ul>
    </div>
    <div class="contain-left-nav">
        <ul>
            <li>
                <p>购买手机</p>
                <a href="#">小米Note</a>
                <a href="#">小米4</a>
                <a href="#">红米</a>
                <a href="#">红米Note</a>
            </li>
            <li>
                <p>购买电视与平板</p>
                <a href="#">小米电视</a>
                <a href="#">小米盒子</a>
                <a href="#">小米平板</a>
            </li>
            <li>
                <p>路由器与硬件设备</p>
                <a href="#">路由器</a>
                <a href="#">体重秤</a>
                <a href="#">净化器与滤芯</a>
            </li>
            <li>
                <p>插线板、移动电源与电池</p>
                <a href="#">小米移动电源</a>
                <a href="#">电池</a>
                <a href="#">充电器</a>
            </li>
            <li>
                <p>耳机音响与存储卡</p>
                <a href="#">小米头戴式耳机</a>
                <a href="#">小米活塞耳机</a>
            </li>
            <li>
                <p>保护膜与贴膜</p>
                <a href="#">保护套/保护壳</a>
                <a href="#">贴膜</a>
                <a href="#">防尘塞</a>
            </li>
            <li>
                <p>后盖与个性化配件</p>
                <a href="#">米键</a>
                <a href="#">后盖</a>
                <a href="#">贴纸</a>
                <a href="#">手机支架</a>
            </li>
            <li>
                <p>小米生活方式</p>
                <a href="#">服饰</a>
                <a href="#">米兔</a>
                <a href="#">背包</a>
                <a href="#">生活周边</a>
            </li>
        </ul>
    </div>
    <div class="contain-banner">
            <div id="carousel-id" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-id" data-slide-to="0" class=""></li>
                <li data-target="#carousel-id" data-slide-to="1" class=""></li>
                <li data-target="#carousel-id" data-slide-to="2" class=""></li>
                <li data-target="#carousel-id" data-slide-to="3" class=""></li>
                <li
                  data-target="#carousel-id"
                  data-slide-to="4"
                  class="active"
                ></li>
              </ol>
              <div class="carousel-inner">
                <div class="item">
                  <img alt="" src="../images/banner1.png" />
                </div>
                <div class="item">
                  <img alt="" src="../images/banner2.png" />
                </div>
                <div class="item">
                  <img alt="" src="../images/banner3.png" />
                </div>
                <div class="item">
                  <img alt="" src="../images/banner4.png" />
                </div>
                <div class="item active">
                  <img alt="" src="../images/banner5.png" />
                </div>
              </div>
              <a class="left carousel-control" href="#carousel-id" data-slide="prev"
                ><span class="glyphicon glyphicon-chevron-left"></span
              ></a>
              <a
                class="right carousel-control"
                href="#carousel-id"
                data-slide="next"
                ><span class="glyphicon glyphicon-chevron-right"></span
              ></a>
            </div>
          </div>
          <div class="contain-bottom">
                <img src="../images/01.png" alt="" /><img src="../images/02.png" alt="" /><img
                  src="../images/03.png"
                  alt=""
                />
              </div>
            </div>
            <div class="xiaomi-star">
              <div class="xiaomi-star-top">
                <span>小米明星单品</span>
                <span>根据机型选配件</span>
                <button class="xiaomi-star-top-page btn1"></button>
                <button class="xiaomi-star-top-page btn2"></button>
              </div>
              <div class="xiaomi-star-bottom">
                <div class="mi-img">
                  <img src="../images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="" />
                  <p>小米智能插座</p>
                  <span>让普通家电变得智能</span>
                </div>
                <div class="mi-img">
                  <img src="../images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="" />
                  <p>小米空气净化器</p>
                  <span>高性能智能空气净化器立即预约</span>
                </div>
                <div class="mi-img">
                  <img src="../images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="" />
                  <p>小米活塞耳机简装版</p>
                  <span>好声音源自活塞式音腔，延续经典设计</span>
                </div>
                <div class="mi-img">
                  <img src="../images/aa.jpg" alt="" />
                  <p>小米路由器</p>
                  <span>顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
                </div>
              </div>
            </div>
            <div class="new-product">
              <p>新品上架<a href="#">更多></a></p>
              <div class="new-product-left">
                <div class="new-product-left-top">
                  <div class="mi-img"></div>
                  <div class="mi-img">
                    <p>小米手环<br />79元</p>
                  </div>
                </div>
                <div class="new-product-left-center">
                  <div>
                    <div class="mi-img">
                      <p>5周年米兔钥匙扣<br />9.9元</p>
                    </div>
                    <div class="mi-img">
                      <p>QCY派Q8蓝牙耳机<br />59.9元</p>
                    </div>
                  </div>
                  <div class="new-product-left-center-right" >
                    <p>小米4实木后盖<br />69元</p>
                  </div>
                  <div class="mi-img">
                    <p>小米T恤路标MILOGO<br />39元</p>
                  </div>
                </div>
                <div class="new-product-left-bottom">
                  <div class="mi-img">
                    <p>小米Note超薄保护壳<br />49元</p>
                  </div>
                  <div class="mi-img">
                    <p>先锋CL31系列耳式耳机<br />99元</p>
                  </div>
                  <div class="mi-img">
                    <p>小米自拍杆<br />49元</p>
                  </div>
                </div>
              </div>
              <div class="new-product-right">
                <div class="new-product-right-top">
                  <h5>特价商品</h5>
                  <p>SanDisk32GB存储卡</p>
                  <span class="price">79元</span><span>109元</span><br />
                  <span>还有更多特价商品</span>
                </div>
                <div class="new-product-right-top">
                  <p>特惠配件套餐</p>
                  <span>手机必备配件组合购买<br />实惠更优惠</span>
                </div>
                <div class="new-product-right-top">
                  <p>我爱酷玩</p>
                  <span>邂逅炫酷的电子产品<br />结交趣味相投的朋友</span>
                </div>
                <div class="new-product-right-bottom">
                  <ul>
                    <li>
                      <a href="#">企业用户采购通道<i>></i></a>
                    </li>
                    <li>
                      <a href="#">小米手机防伪查询<i>></i></a>
                    </li>
                    <li>
                      <a href="#">小米手机官翻版<i>></i></a>
                    </li>
                    <li>
                      <a href="#">小米路由器官翻版<i>></i></a>
                    </li>
                    <li>
                      <a href="#">米粉红包<i>></i></a>
                    </li>
                  </ul>
                  <div class="pay">
                    <p>话费充值</p>
                    <input type="text" placeholder="请输入手机号" />
                    <select>
                      <option value="100yuan">100元</option>
                    </select>
                    <p class="actually">实付价格98.4元起</p>
                    <button>立即充值</button>
                  </div>
                </div>
              </div>
            </div>
<div class="foot">
    <div class="foot-wrap">
        <div class="foot-top">
            <ul>
                <li>
                    <img src="../images/10.png" alt="">
                    <p>一小时快修服务</p>
                </li>
                <li>
                    <img src="../images/11.png" alt="">
                    <p>7天无理由退货</p>
                </li>
                <li>
                    <img src="../images/12.png" alt="">
                    <p>15天免费换货</p>
                </li>
                <li>
                    <img src="../images/13.png" alt="">
                    <p>满150包邮</p>
                </li>
                <li>
                    <img src="../images/14.png" alt="">
                    <p>520余家售后网点</p>
                </li>
            </ul>
        </div>
        <div class="foot-center">
            <ul>
                <li class="foot-center-title">帮助中心</li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">支付方式</a></li>
                <li><a href="#">配送方式</a></li>
            </ul>
            <ul>
                <li class="foot-center-title">服务支持</li>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">自助服务</a></li>
                <li><a href="#">相关下载</a></li>
            </ul>
            <ul>
                <li class="foot-center-title">小米之家</li>
                <li><a href="#">小米之家</a></li>
                <li><a href="#">服务网店</a></li>
                <li><a href="#">预约亲临到店服务</a></li>
            </ul>
            <ul>
                    <li class="foot-center-title">关于小米</li>
                    <li><a href="#">了解小米</a></li>
                    <li><a href="#">加入小米</a></li>
                    <li><a href="#">联系我们</a></li>
            </ul>
            <ul>
                    <li class="foot-center-title">关注我们</li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">小米部落</a></li>
                    <li><a href="#">官方微信</a></li>
            </ul>
            <div class="foot-center-right">
                <p>400-100-5678</p>
                <p>周一至周日8：00-18：00 <br /> (仅收市内话费)</p>
                <a href="#">24小时在线服务</a>
            </div>
        </div>
        <div class="foot-foot">
            <ul>
                <li>小米旗下网站：</li>
                <li><a href="#">小米网</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">米聊</a></li>
                <li><a href="#">多看书城</a></li>
                <li><a href="#">小米路由器</a></li>
                <li><a href="#">繁体香港</a></li>
                <li><a href="#">繁体台湾</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">小米后院</a></li>
                <li><a href="#">小米天猫店</a></li>
                <li><a href="#">小米淘宝直营店</a></li>
                <li><a href="#">小米网盟</a></li>
            </ul>
            <br>
            <p>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
            <img src="../images/16.png" alt="">
            <select>
                <option value="Simplified">简体中文</option>
            </select>
        </div>
    </div>

</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>